<template>
  <div id="app" ref="app">
    
      <Students>
        <template #list>
          <tr v-for="(student,idx) in student_list" :key="idx">
            <td>{{student.number|toChinese}}</td>
            <td v-text="student.code"></td>
            <td v-text="student.name"></td>
            <td v-text="student.classes"></td>
          </tr>
        </template>
      </Students>
    </div>
</template>

<script>
import Students from './components/Students.vue'

export default {
  name: 'App',
  components: {
    Students
  },
  data:function(){
    return {
      student_list:[
        {number:1,code:'2019-01',name:'张飞',classes:'1903'},
        {number:2,code:'2019-02',name:'关羽',classes:'1903'},
        {number:3,code:'2019-03',name:'赵云',classes:'1903'},
        {number:4,code:'2019-04',name:'魏延',classes:'1903'}
      ],
      backData:[
        {number:5,code:'2019-05',name:'黄忠',classes:'1903'},
        {number:6,code:'2019-06',name:'马超',classes:'1903'},
        {number:7,code:'2019-07',name:'诸葛亮',classes:'1903'},
        {number:8,code:'2019-08',name:'卢布',classes:'1903'},
        {number:9,code:'2019-09',name:'黄忠',classes:'1903'},
        {number:5,code:'2019-10',name:'马超',classes:'1903'},
        {number:6,code:'2019-11',name:'诸葛亮',classes:'1903'},
        {number:7,code:'2019-12',name:'卢布',classes:'1903'},
        {number:8,code:'2019-13',name:'黄忠',classes:'1903'},
        {number:9,code:'2019-14',name:'马超',classes:'1903'},
        {number:6,code:'2019-15',name:'诸葛亮',classes:'1903'},
        {number:6,code:'2019-16',name:'卢布',classes:'1903'},
        {number:7,code:'2019-17',name:'黄忠',classes:'1903'},
        {number:8,code:'2019-18',name:'马超',classes:'1903'},
        {number:9,code:'2019-19',name:'诸葛亮',classes:'1903'},
        {number:5,code:'2019-20',name:'卢布',classes:'1903'}
      ],
      
      bodyHeight:0,
      sctop:0
    }
  },
  mounted(){
    this.bodyHeight = window.getComputedStyle(this.$refs.app).height;
    window.addEventListener("mousewheel",this.scrollListen,false);
  },
  filters:{
    toChinese(val){
      if (Number(val) !== Number(val)) {
        return val
      }
      // 大数位，每四位一节
      const cnFigure = ['', '万', '亿', '万亿']
      // 中文数字0-9
      const cnInteger = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      // 十进制计数“个十百千”
      const cnDecimalism = ['', '十', '百', '千']
      // 先转为字符串
      const string = val + ''
      // 小数点分割
      const numbers = string.split('.')
      const integerPart = numbers[0]
      const decimalPart = numbers[1]
      // 整数部分位数
      const len = integerPart.length
      // 四位分节
      const pitch = Math.ceil(len / 4)
      const array = []
      // 分为每四位一节，从低位向高位分
      for (let index = 0; index < pitch; index++) {
        array.push(integerPart.slice((len - (index + 1) * 4 < 0) ? 0 : (len - (index + 1) * 4), len - index * 4))
      }
      // 将四位一节的数字转换为对应的中文，拼接上大数位，比如（一千一百一十一）（万），“一千一百一十一万”
      const cnArray = array.map((figure, index) => {
        const cn = figure.split('').map((char, i) => {
          return char === '0' ? '零' : (cnInteger[Number(char)] + cnDecimalism[figure.length - i - 1])
          // replace末尾的所有“零”，例如“壹仟零零零”变成“壹仟”；再replace中间的多个零，例如“壹万零零零玖”变成“壹万零玖”
        }).join('').replace(/\u96f6+$/, '').replace(/\u96f6+/g, '\u96f6')
        // 防止出现“零零零零”变成“”之后再加大数位，例如“（零零零零）万”变成“万”
        return cn.length ? (cn + cnFigure[index]) : (cnFigure[index] ? '零' : '')
      }).reverse()
      // 整数，替换掉中间连续的“零”，例如“一万亿零（亿）零（万）一千”变为“一万亿零一千”，最后可加上.replace(/^\u4e00\u5341/, '\u5341')，将“一十****”变为“十****”
      const integerCN = cnArray.join('').replace(/\u96f6+/g, '\u96f6')
    
      let decimalCN = ''
      if (!decimalPart || decimalPart === '0' || decimalPart === '00') {
        decimalCN = ''
      } else {
        const [p0, p1] = decimalPart.split('')
        decimalCN = (p0 === '0' ? '零' : (cnInteger[Number(p0)] + '')) + (!p1 || p1 === '0' ? '' : (cnInteger[Number(p1)] + ''))
      }
    
      return `${integerCN || '零'}${decimalCN}`
    }
  },
  methods:{
    scrollListen(){
      var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      if(scrollTop+windowHeight == scrollHeight){
        this.student_list = this.student_list.concat(this.backData);
      }
    }
  }
}
</script>

<style>
  #app{
    width:100%;
    height:1500px;

  }
</style>
